<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue component</title>
	<link rel="stylesheet" href="../../assets/css/bootstrap.min.css" > 
	<script src="../../assets/js/vue-2.5.6.js"></script>
</head>
<body>
	<div class="container" id="app-7">
		<div class="form-group">
			<ol>
			    <!--
			      现在我们为每个 todo-item 提供 todo 对象
			      todo 对象是变量，即其内容可以是动态的。
			      我们也需要为每个组件提供一个“key”，稍后再
			      作详细解释。
			    -->
			    <todo-item
			      v-for="item in groceryList"
			      v-bind:todo="item"
			      v-bind:key="item.id">
			    </todo-item>
			  </ol>
		</div>
	</div>
	
</body>
<script type="text/javascript">
	Vue.component('todo-item', {
	  props: ['todo'],
	  template: '<li>{{ todo.text }}</li>'
	})

	var app7 = new Vue({
	  el: '#app-7',
	  data: {
	    groceryList: [
	      { id: 0, text: '蔬菜' },
	      { id: 1, text: '奶酪' },
	      { id: 2, text: '随便其它什么人吃的东西' }
	    ]
	  }
	})
</script>
</html>